import React, { useState, useEffect } from 'react'
import dayjs from 'dayjs'
import axios from 'axios'
import styles from './list.module.css'
import { InfiniteScroll ,Toast} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
export default function Index() {
  const [start, SetStart] = useState('北京')
  const [end, SetEnd] = useState('三亚')
  const [isSpeed, SetIsSpeed] = useState(false)
  const [isSeat, SetisSeat] = useState(false)
  const [date, SetDate] = useState(dayjs().format('YYYY-MM-DD'))
  const [isDesc, SetisDesc] = useState(false)
  const [page, SetPage] = useState(1)
  const [list, SetList] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const nav= useNavigate()

  const FeachList = async () => {
    const res = await axios.post("/api/trip/train", {
      start,
      end,
      page,
      date,
      isSpeed,
      isDesc,
      isSeat,
    });

    if (res.data.code === 200) {
      SetList([...list, ...res.data.data]);
      SetPage(page + 1);
    } else {
      Toast.show({
        icon: "fail",
        content: res.data.message,
      });
    }

    if (res.data.data.length === 0) {
      setHasMore(false);
    }
  };

  useEffect(() => {
    FeachList();
  }, []);
  const handltoDetail=(item)=>{
    nav (`/detail/${item.id}`)
  }
  return (
    <div>
      {
        list.map((item, ind) => {
          return <div key={ind}>
            <div className={styles.listItem}>
              <div onClick={()=>handltoDetail(item)} className={styles.itemCon}>
                <span>{item.id}</span>
                <span>{item.start}</span>

                <span>{item.end}</span>
                <span>{item.startTime}</span>
                 <span>¥{item.tick.secondTick}</span>
              </div>
            </div>
          </div>
        })

      }
      <InfiniteScroll loadMore={FeachList} hasMore={hasMore} />
    </div>
  )
}
